<template>
  <div>
    <div class="companymessage">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="search.oid"
            class="search_no"
            size="medium"
            placeholder="输入高管编号查询"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="search.offName"
            class="search_name"
            size="medium"
            placeholder="输入高管名称查询"
            style="margin-right: 20px"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="search.cid"
            :class="[search.cid == undefined ? '' : ':disabled=true']"
            size="medium"
            placeholder="输入企业编号查询"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.job"
            filterable
            placeholder="输入职务查询"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in jobOptions"
              :key="item.id"
              :label="item.job"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div style="margin-left: 900px">
          <el-form-item>
            <el-button
              type="text"
              @click="searchPageList(1)"
              class="el-icon-search"
              >搜索
            </el-button>
          </el-form-item>
          <el-form-item >
            <el-button  
            v-show="search.cid!==undefined&&search.cid!==''"
              class="el-icon-circle-plus-outline"
              type="text"
              @click="dialogVisible = true">
              新增
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="el-icon-delete"
              type="text"
              @click="handleDelete()"
              >批量删除
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="el-icon-refresh" type="text" @click="reSet"
              >重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <div style="text-align: center; color: #409eff"><h2>信息展示</h2></div>
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        highlight-current-row
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- 多选++++++++++++++++ -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="主管编号" width="112">
          <template slot-scope="scope">
            <!-- <i class=""></i>
            <span>{{ scope.row.oid }}</span> -->
            <router-link @click.native="lookUp(scope.row)" to="">
              {{ scope.row.oid }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.offName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="职务" width="180">
          <template slot-scope="scope">
            <!-- <i class=""></i>
            <span>{{ scope.row.job }}</span> -->
            <el-select
              v-model="scope.row.job"
              filterable
              placeholder="请选择"
              style="width: 150px"
              :disabled="true"
            >
              <el-option
                v-for="item in jobOptions"
                :key="item.id"
                :label="item.job"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="企业编号" width="112">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.cid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="55">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出生日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.birthday }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="180">
          <template slot-scope="scope">
            <!-- <i class=""></i>
            <span>{{ scope.row.edu }}</span> -->
            <el-select
              v-model="scope.row.edu"
              filterable
              placeholder="请选择"
              :disabled="true"
              style="width: 150px"
            >
              <el-option
                v-for="item in eduOptions"
                :key="item.id"
                :label="item.edu"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="登记日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.regDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新日期">
          <template slot-scope="scope">
            <i class=""></i>
            <span>{{ scope.row.updateDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row, 1)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="高管信息"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        @close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item>
            <el-col :span="24">
              <el-form-item label="主管编号">
                <el-input
                  v-model="ruleForm.oid"
                  :disabled="true"
                  style="width: 100%"
                  placeholder="主管编号自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="12">
              <el-form-item class="wid" label="姓名" prop="offName">
                <el-input
                  v-model="ruleForm.offName"
                  :disabled="dis"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="wid" label="学历" prop="edu">
                <el-select
                  v-model="ruleForm.edu"
                  filterable
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="dis"
                >
                  <el-option
                    v-for="item in eduOptions"
                    :key="item.id"
                    :label="item.edu"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <!-- <el-form-item class="wid" label="职务" prop="job">
            <el-input v-model="ruleForm.job"  :disabled="dis" style="width: 250px"></el-input>
          </el-form-item> -->
              <el-form-item class="wid" label="职务" prop="job">
                <el-select
                  v-model="ruleForm.job"
                  filterable
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="dis"
                >
                  <el-option
                    v-for="item in jobOptions"
                    :key="item.id"
                    :label="item.job"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="wid" label="企业编号" prop="cid">
                <el-input
                  placeholder="企业编号自动填充"
                  v-model="ruleForm.cid"
                  :disabled="true"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <!-- <el-form-item class="wid" label="性别" prop="sex">
            <el-input v-model="ruleForm.sex"  :disabled="dis" style="width: 250px"></el-input>
          </el-form-item> -->
              <el-form-item class="wid" label="性别" prop="sex">
                <el-select
                  v-model="ruleForm.sex"
                  filterable
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="dis"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="wid" label="登记日期" prop="regDate">
                <el-input
                  placeholder="登记日期自动生成"
                  v-model="ruleForm.regDate"
                  :disabled="true"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-col :span="12">
              <el-form-item class="wid" label="出生日期" prop="birthday">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.birthday"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  :disabled="dis"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="wid" label="更新日期" prop="updateDate">
                <el-input
                  placeholder="更新日期自动生成"
                  v-model="ruleForm.updateDate"
                  :disabled="true"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer" v-show="dis===false">
          <el-button @click="cancel()" size="medium">取 消</el-button>
          <el-button @click="addUser()" type="primary" size="medium"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <br />
      <div class="pages">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eduOptions: [],
      jobOptions: [],
      dis: false,
      options: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      ruleForm: {
        oid: "",
        offName: "",
        job: "",
        cid: "",
        sex: "",
        birthday: "",
        edu: "",
        regDate: "",
        updateDate: "",
      },
      rules: {
        offName: [
          {
            required: true,
            type: "string",
            message: "请输入高管名称",
            trigger: "blur",
          },
        ],
        job: [{ required: true, message: "请输入职务", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        birthday: [
          { required: true, message: "请输入出生日期", trigger: "blur" },
        ],
        edu: [{ required: true, message: "请选择学历", trigger: "blur" }],
      },
      tableData: [],
      search: {
        oid: "",
        offName: "",
        job: "",
        cid: "",
      },
      dialogVisible: false,
      dialogUpdate: false,
      dialogDel: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false,
      delIds: [],
      multipleSelection: [],
    };
  },
  mounted() {
    
    this.search.cid = this.$route.params.cid;
    this.ruleForm.cid = this.$route.params.cid;
    //this.ruleForm.cid=this.this.search.cid;
    //console.log(this.search.cid)
    this.axios
      .post(`/officer/searchPageList/1/5`, this.search)
      .then((response) => {
        this.tableData = response.data.pageDate;
        this.total = response.data.totalNum;
      })
      .catch((error) => {
        console.log(error);
      });
    this.getEduList();
    this.getJobList();
  },
  methods: {
    getEduList() {
      this.axios.get(`/edu/findAll`).then((res) => {
        this.eduOptions = res.data;
      });
    },
    getJobList() {
      this.axios.get(`/job/findAll`).then((res) => {
        this.jobOptions = res.data;
      });
    },
    searchPageList(pageNum) {
      this.currentPage = pageNum === 1 ? pageNum : this.currentPage;
      this.axios
        .post(
          `/officer/searchPageList/${this.currentPage}/${this.pageSize}`,
          this.search
        )
        .then((response) => {
          this.tableData = response.data.pageDate;
          this.total = response.data.totalNum;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    reSet() {
      this.search = {};
    },
    lookUp(row) {
      this.dis = true;
      this.dialogVisible = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      this.dis = false;
      this.ruleForm = {};
      this.ruleForm.cid = this.search.cid;
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.ruleForm = Object.assign({}, row); //这句是关键！！！
    },
    handleDelete(index, row, flag) {
      //console.log(index, row);
      this.$confirm("删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == 1) {
            this.delIds.push(row.oid);
          } else {
            if (this.multipleSelection.length !== 0) {
              this.multipleSelection.forEach((item) => {
                this.delIds.push(item.oid);
              });
            } else {
              this.$message({
                message: "请先选择",
                type: "warning",
              });
              return;
            }
          }

          this.axios({
            method: "post",
            url: "/officer/delete",
            data: this.delIds,
          })
            .then((response) => {
              if (response.data.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.searchPageList();
              } else {
                this.$message.error("删除错误", response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("删除错误", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.searchPageList();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.searchPageList();
    },
    cancel() {
      this.dialogUpdate = false;
      this.dialogVisible = false;
      this.ruleForm = {};
    },
    addUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url: `/officer/${
              this.ruleForm.oid == undefined ||
              this.ruleForm.oid == null ||
              this.ruleForm.oid == ""
                ? "add"
                : "update"
            }`,
            data: this.ruleForm,
          })
            .then((response) => {
              if (response.data.code == 0) {
                this.searchPageList();
                this.dialogVisible = false;
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
              } else {
                this.$message.error("操作错误", response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error("操作错误", error);
            });
        } else {
          this.$message({
            message: "请先完善高管信息",
            type: "warning",
          });
        }
      });
    },
    refreshData() {
      location.reload();
    },
    // 多选+++++++++++++
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
  },
  created() {
    this.searchPageList();
  },
};
</script>
<style scoped>
.search_name {
  width: 200px;
}
.pages {
  margin: 0px;
  padding: 0px;
  text-align: right;
}
.sidebar {
  float: left;
}
.companymessage {
  float: left;
}
.wid {
  float: left;
}
</style>
